<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/web/commons/global.jsp"%>

<!--宽度是790 每行有4列-->
<div class="audios-wrapper" data-width="790" data-item="4">
	<c:forEach items="${audios}" varStatus="audioStatus_top">
		<c:if test="${audioStatus_top.index % 4 == 0 }">
			<div class="audios">
				<c:forEach items="${audios}" var="audio"
					begin="${audioStatus_top.index / 4 * 4 }"
					end="${audioStatus_top.index / 4 * 4 +3 }">
					<div class="audio">
						<div class="img-div">
							<a href="${baseUrl }/audio/${audio.id }.html"> <img
								class="img" src="${audio.coverUrl }" />
							</a>
							<c:if test="${audio.progressStatus == 2}">
								<div class="tip-wrapper">
									<div class="tip-text">
										完<br />结
									</div>
									<div class="tip-bottom"></div>
								</div>
							</c:if>
						</div>
						<div class="content-div">
							<div class="content-div-title">
								<a href="${baseUrl }/audio/${audio.id }.html">
									<h2 class="title">${audio.title }</h2>
								</a>
							</div>
							<div class="common-bars-wrapper">
								<div class="bars">
									<div class="bar" style="float: left">
										<i class="icon-star"></i> <i class="icon-star"></i> <i
											class="icon-star"></i> <i class=" icon-star-half"></i> <i
											class="icon-star undertone"></i>
									</div>
									<div class="bar" style="float: right">
										<c:choose>
											<c:when test="${not empty audio.rFavoriteSource }">
												<i class="icon-heart"></i>
											</c:when>
											<c:otherwise>
												<i class="icon-heart undertone"></i>
											</c:otherwise>
										</c:choose>
									</div>
									<div class="clear-both"></div>
								</div>
							</div>

							<div class="desc hid">${audio.info }</div>
							<div class="vertical-spacing-10"></div>


							<div class="cur-audio"
								style="height: 15px; font-size: 13px; overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap;">
								<c:if test="${not audio.entity }">
									<a
										href="${baseUrl }/audio/${audio.childAudios[audio.countCognate - 1].id }.html">
										<span class="cur-audio-title"><i
											class="icon-play-circle"></i> 第${audio.countCognate }集</span> <span
										class="cur-audio-desc">${audio.title
											}最新${audio.countCognate }集
									</span>
									</a>
								</c:if>
							</div>

							<div class="time">
								<div>
									<span>${audio.countCognate }集 ${audio.showTime }</span>
								</div>
								<div>
									<span>${audio.statistics.showCountWatch }</span>
								</div>
								<div class="clear-both"></div>
							</div>
						</div>
					</div>
				</c:forEach>
			</div>
		</c:if>
	</c:forEach>
</div>
<div class="vertical-spacing-20"></div>
<div class="audio-pagination-wrapper">
	<div class="content">
		<ul class="pagination page-ul">

			<c:if test="${pagination.index > 1}">
				<li class="page-item"><a href="javascript:;"
					onclick="getAudioList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${empty param.progress ? 0 : param.progress},${pagination.index - 1})">&laquo;</a></li>
				<li class="page-item"><a href="javascript:;"
					onclick="getAudioList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${empty param.progress ? 0 : param.progress},1)">首页</a></li>
			</c:if>

			<c:forEach begin="${pagination.index }" end="${pagination.index + 7}"
				varStatus="pageStatus">
				<c:if test="${pageStatus.index <= pagination.pages}">
					<c:choose>
						<c:when test="${pageStatus.first }">
							<li class="page-item cur-page"><a href="javascript:;">${pageStatus.index
									}</a></li>
						</c:when>
						<c:otherwise>
							<li class="page-item"><a href="javascript:;"
								onclick="getAudioList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${empty param.progress ? 0 : param.progress},${pageStatus.index })">${pageStatus.index
									}</a></li>
						</c:otherwise>
					</c:choose>
				</c:if>
			</c:forEach>

			<c:if test="${pagination.index < pagination.pages}">
				<li class="page-item"
					onclick="getAudioList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${empty param.progress ? 0 : param.progress},${pagination.index + 1})"><a
					href="javascript:;">&raquo;</a></li>
				<li class="page-item"
					onclick="getAudioList(${empty param.cat ? 0 : param.cat},${empty param.sort ? 0 : param.sort},${empty param.progress ? 0 : param.progress},${pagination.pages} )"><a
					href="javascript:;">尾页</a></li>
			</c:if>

			<!-- 													<li class="page-item has-more"><a href="javascript:;">&hellip;</a></li> -->
		</ul>
	</div>
</div>




<script type="text/javascript">
/**
 * 从新初始化每一列的宽度
 */
$(function () {
//音频div包装对象
    var _AUDIOS_WRAPPER_ = $('.audios-wrapper');
    var _AUDIOS_WRAPPER_WIDTH_ = _AUDIOS_WRAPPER_.data('width');

    _AUDIOS_WRAPPER_.width(_AUDIOS_WRAPPER_WIDTH_);
    var _AUDIOS_ITEM_ = _AUDIOS_WRAPPER_.data('item');

    //每个音频
    var _AUDIO_ = _AUDIOS_WRAPPER_.find('.audios .audio');
    var _AUDIO_WIDTH_ = (_AUDIOS_WRAPPER_WIDTH_ - (_AUDIOS_ITEM_ * 2) - ((_AUDIOS_ITEM_ - 1) * 20)) / 4;
    _AUDIO_.width(_AUDIO_WIDTH_);
    //每个音频的图片

    //修正图片的宽度
    var _AUDIO_IMG_ = _AUDIOS_WRAPPER_.find('.audios .audio .img-div img');
    _AUDIO_IMG_.width(_AUDIO_WIDTH_);

    //修正 完结等提示的左移位置
    var _AUDIO_TIP_WRAPPER_ = _AUDIOS_WRAPPER_.find('.audios .audio .img-div .tip-wrapper');
    _AUDIO_TIP_WRAPPER_.css('margin-left', (_AUDIO_WIDTH_ - 20) + 'px');

});


/**
 * 音频列表布局
 */
$(function () {
    //音频div包装对象
    var _AUDIOS_WRAPPER_ = $('.audios-wrapper');
    //音频列
    var _AUDIOS_ = _AUDIOS_WRAPPER_.find('.audios');
    //音频列个数
    var _AUDIOS_LENGTH_ = _AUDIOS_.length;
    //音频div包装对象 初始高度
    var _AUDIOS_WRAPPER_HEIGHT_ = 0;
    //音频列显示优先级
    var _AUDIOS_WRAPPER_Z_INDEX_ = 10000;
    //每个音频列间距10px
    var _AUDIOS_MARGIN_TOP_ = 10;

    //第一个音频列定义高度
    var _AUDIOS_FIRST_HEIGHT_ = 0;
    _AUDIOS_.each(function (inx, val) {
        var _this = $(val)
        if (inx == 0) {
            _AUDIOS_FIRST_HEIGHT_ = _this.height(); //初始化第一个音频列高度
        }

        if (inx == (_AUDIOS_LENGTH_ - 1)) {
            _AUDIOS_WRAPPER_HEIGHT_ = _AUDIOS_WRAPPER_HEIGHT_ + _this.height(); //增加音频div包装对象高度
        } else {
            _AUDIOS_WRAPPER_HEIGHT_ = _AUDIOS_WRAPPER_HEIGHT_ + _this.height() + _AUDIOS_MARGIN_TOP_;
        }

        _this.css('z-index', _AUDIOS_WRAPPER_Z_INDEX_--); //设置优先级
        if (inx > 0) {
            _this.css('margin-top', (_AUDIOS_FIRST_HEIGHT_ * inx + _AUDIOS_MARGIN_TOP_ * inx) + 'px'); //设置音频列间距
        }
    });
    _AUDIOS_WRAPPER_.height(_AUDIOS_WRAPPER_HEIGHT_); //音频div包装对象高度

    _AUDIOS_.find('.audio').hover(function () {
        var _this = $(this);
        _this.find('.content-div .desc').show();
    }, function () {
        var _this = $(this);
        _this.find('.content-div .desc').hide();
    });
});
</script>
